<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <title>Multiline editing in JavaScript tree grid component | TreeGrid</title>
      <meta name="description" content="Live sample shows TreeGrid features: multiline editing, edit masks and permissions, cell span, images and links in cells, rows with variable heights" />
   </head>
   <body class="Example">
      <style>
         /* Examples shared styles */
         .Example h1,.Example h2,.Example ul,.Example .Desc,.Example .Path,.Example .Xml { max-height:999999px; }
         .Example h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
         .Example h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
         .Example h3,.Example h4 { display:inline-block; font:bold 15px/17px Arial; padding:0px 5px 0px 5px; border-radius:2px; margin:2px; color:#333; }
         .Example h3 { background:#EE9; border:1px solid #DD8; }
         .Example h4 { background:#BDE; border:1px solid #ACD; }
         .Example a { text-decoration:underline; }      
         .Example li { padding-bottom:8px; }
         .Example ul { margin:6px 0px 0px 0px; font:13px/16px Arial; }    
         .Example > ul { margin-left:0px; padding-left:15px; clear:both; }
         .Example ul b { color:#0585B9; }
         .Example .Desc { margin:0px 5px 10px 5px; padding:10px; border:1px solid #dfdfdf; font:14px/17px Arial; }
         .Example .Desc b { color:#0585B9; }
         .Example .Path { font:normal 12px Arial; color:#0585B9; }
         .Example .Path b { color:#D73938; }
         .Example .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
         .Example .Path i { color:black; font-style:normal; font-weight:bold; }
         .Example .Xml { margin-bottom:6px; font:11px/14px Arial; color:#757575; }
         .Example .Border { margin:0px 5px 5px 5px; }
         .Example .Main { }
          @media (max-height:800px) { 
            .Example .Desc { font-size:13px; line-height:15px; margin:0px 5px 5px 5px; padding:3px 5px; } 
            .Example .Desc br { display:none; }
            .Example .Border { margin-bottom:0px; }
            .Example h1 { font:20px Arial; padding:0px; }
            .Example h2 { font:12px Arial; }
            }
      </style>
      <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <h1>A list of books</h1>
      <h2>Variable row height, multiline editing, mask editing, image and link types</h2>
      <div class="Desc">
         The example has two modes switched by radio buttons in the first row.<br> 
         In the <b>read-only mode</b> you can preview texts by focusing them or activate and follow the links and images by clicking them.<br>
         In the <b>write mode</b> you can change texts. Editing changes in multiline texts can be accepted by <b>Ctrl+Enter</b> or click outside the cell.
         You can also edit image and link sources by special masks, so you can change only few parts of edited string.
         When editing multiline texts, you can see automatic height changing, but only to predefined maximal value.<br />
      </div>
      <div align="center" class="Border">
         <div class="Main">
            <bdo Layout_Url="BooksDef.js" Data_Url="BooksData.js"></bdo>
         </div>
      </div>
      <script>

// Called on opening or dropping image file to grid
// Places the image always to the Img type cell "G"
Grids.OnOpenImageCell = function(G,row,col){
if(G.Editing==2) return [null,null,""]; // Restricts opening image, but permits dropping xlsx
if(row.Def.Name=="Desc") return [row,"G"]; 
if(row.Def.Name=="Info") return [row.previousSibling,"G"];
if(row.Def.Name=="Book") return [row.firstChild,"G"];
}
Grids.OnDropFile = Grids.OnOpenImageCell;

// Called on start editing cell link
// Edits the link always in the Img type cell "G"
Grids.OnSetLink = function(G,cells){
var row = cells[0];
if(!row) return true;
cells[1] = "G"; cells.length = 2;
if(row.Def.Name=="Info") cells[1] = row.previousSibling;
else if(row.Def.Name=="Book") cells[1] = row.firstChild;
else if(row.Def.Name!="Desc") return true; 
}

// Called on adding row
// Adds / copies new rows only to the books level
Grids.OnCanRowAdd = function(G,par,next){
if(G.Editing==2) return false;
if(!par||!par.id) return [G.GetFirst()]; // Instead of root add the last child to the Books
if(par.Def.Name!="Root") return [par.parentNode,par];
}

// Restricts deleting rows when set Editing = 2
Grids.OnCanRowDelete = function(G,row,type,rows){ return G.Editing==2 ? 0 : type;  }

      </script>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialGrid\s*=\s*(\d+)/), TGIndex = 16;
          if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialHtmlBooks", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGrid="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>
   </body>
</html>
